// @ts-nocheck
// 这里主要负责组件的大小控制和页面切换

// 为网站设置图标
function setWebIcon(iconLink) {
    let theIcon = document.querySelector("link[rel='icon']");

    // 设置及创建
    if (theIcon != null) {
        theIcon.href = iconLink;
    } else {
        theIcon = document.createElement("link");
        theIcon.rel = "icon";
        theIcon.href = iconLink;
        document.head.appendChild(theIcon);
    }
}
setWebIcon("./img/Main/htmlIcon.svg");

// 头部
const headOver = document.querySelector(".Head .headOver");

// 导航栏
const guide = document.querySelector(".Guide .guide");

// 垫块
const cushionUp = document.querySelector(".cushionUp");

// 子标题
const subtitleList = document.querySelectorAll(".subtitle");

// 功能块
const funcBlockList = document.querySelectorAll(".FuncBlock");

// 按钮
const toggleButtonList = document.querySelectorAll(".ToggleButton");

const HomeComponentList = [
    // 头部
    [headOver, 1],
    // 导航栏
    [guide, 1],
    // 垫块
    [cushionUp, 1],
    // 子标题
    [subtitleList, 0.93],
    // 功能块
    [funcBlockList, 1],
    // 按钮
    [toggleButtonList, 1],
];

function sizeSet(comp, prec) {
    // 获取初始大小
    let windowWide = window.innerWidth;
    comp.style.setProperty("--controlLen", String(windowWide * prec));
}

function componentSizeSet(componentList) {
    componentList.forEach((comp) => {
        // 如果是单个
        if(!(comp[0] instanceof NodeList)) {
            sizeSet(comp[0], comp[1]);
            return;
        }
        // 如果是多个
        comp[0].forEach((comps) => {
            sizeSet(comps, comp[1]);
        });
    });
}

// 组件大小控制
function componentSizeControl(componentList) {
    // 初始设置
    componentSizeSet(componentList);
    window.addEventListener("resize", () => {
        componentSizeSet(componentList);
    });
}
componentSizeControl(HomeComponentList);
export var CSC = componentSizeControl;


// 控制 pageBox大小
const pageBoxList = document.querySelectorAll(".pageBox");

function setPageBoxSize() {
    let windowHigh = window.innerHeight;
    pageBoxList.forEach((pageBox) => {
        let pageBoxSize = windowHigh - headOver.offsetHeight - guide.offsetHeight * 0.9;
        pageBox.style.height = String(pageBoxSize) + "px";
    });
}

function pageBoxSizeControl() {
    setPageBoxSize();
    window.addEventListener("resize", () => {
        setPageBoxSize();
    })
}
pageBoxSizeControl();

// 获得所有跳转标签
const guideAListA = document.querySelectorAll(".guide li");
const pageNameList = [
    "Home",
    "Time Table",
    "Device Control",
    "Personal Details",
];

// overHead 的标签
const headOverTitle = document.querySelector(".Head .headOver span");
headOverTitle.textContent = pageNameList[0];
// 页面列表
const bodyPageList = document.querySelector(".PageWindow .pageList");
var timeoutSign = null;

// 页面跳转控制
function pageControl() {
    guideAListA.forEach((guideA, index) => {
        guideA.addEventListener("click", () => {
            let nowPageWide = pageBoxList[0].offsetWidth;
            bodyPageList.scrollTo({left: nowPageWide * index});
            headOverTitle.textContent = pageNameList[index];
        });
    });

    // 滚动
    bodyPageList.addEventListener("scroll", () => {
        clearTimeout(timeoutSign);
        timeoutSign = setTimeout(() => {
            let pageWide = pageBoxList[0].offsetWidth;
            let index = Math.trunc((bodyPageList.scrollLeft + pageWide * 0.5) / pageWide);
            guideAListA[index].click();
        }, 100);
    });
}
pageControl();